<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
  <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
  <script>
    $(function (){
      $("img").click(function () {
        // attr(属性名):获取指定属性的属性值
        console.log("src属性:" + $(this).attr("src"));
        console.log("alt属性:" + $(this).attr("alt"));
        console.log("title属性:" + $(this).attr("title"));
        console.log("自定义id属性:" + $(this).attr("data-id"));
        console.log("自定义name属性:" + $(this).attr("data-name"));
      });
      $("input").blur(function () {
        console.log("type属性:" + $(this).attr("type"));
        console.log("id属性：" + $(this).attr("id"));
        console.log("value属性:" + $(this).attr("value"))
      })
      $("input[name='hobbies']").click(function () {
        // prop语法是在jquery1.9引入的,一般用于表单元素
        console.log("type属性:" + $(this).prop("type"))
        console.log("name属性:" + $(this).prop("name"))
        console.log("value属性:" + $(this).prop("value"))

      });
    })
  </script>
</head>
<body>
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气还行" data-id="1" data-name="admin">
<input type="text" id="inText" value="admin"/>
<input type="checkbox" name="hobbies" value="eat">
</body>
</html>